<template>
  <div  v-theme:column="'narrow'"   id="show-blogs">
    <h1>博客总览</h1>
<!--  搜索框  -->
    <input type="text" v-model="search" placeholder="搜索">

    <div v-for="blog in filteredBolgs" class="single-blog">

      <router-link v-bind:to="'/blog/' + blog.id">
        <h2 v-rainbow>{{blog.title | to-uppercase}}</h2>
      </router-link>

      <article>
        {{blog.body | snippet}}
      </article>

    </div>
  </div>
</template>

<script>
    export default {
      name: "show-blogs",

      data(){
          return{
            blogs:[],
            search:""


          }
      },

      created() {
          // this.$http.get("https://jsonplaceholder.typicode.com/posts")
          //   .then(function (data) {
          //     // console.log(data);
          //     this.blogs = data.body.slice(0,10);
          //     console.log(this.blogs);
          //   })

        this.$http.get("./../static/posts.json")
          .then(function (data) {
            // console.log(data);
            this.blogs = data.body.slice(0,10);
            console.log(this.blogs);
          })
      },

      //计算属性
      computed:{
        filteredBolgs:function () {
          return this.blogs.filter((blog) =>{
            //按title匹配搜索的内容
            return blog.title.match(this.search);
          })
        }
      },

      //局部过滤器
      filters:{
        //写法1
        // "to-uppercase":function (value) {
        //   return value.toUpperCase();
        // }

        //写法2 es6写法
        toUppercase(value){
          return value.toUpperCase();
        }
      },
      //局部指令
      directives:{
        'rainbow':{
          bind(el,binding,vnode){
            el.style.color = "#"+Math.random().toString(16).slice(2,8);
          }
        }
      }


    }
</script>

<style scoped>
  #show-blogs{
    max-width: 800px;
    margin: 0 auto;
  }

  .single-blog{
    padding: 20px;
    margin: 20px 0;
    box-sizing: border-box;
    background: #eeeeee;
    border: 1px dotted #aaaaaa;
  }
  #show-blogs a{
    color: #444444;
    text-decoration: none;
  }

  input[type="text"]{
    padding: 8px;
    width: 100%;
    box-sizing: border-box;
  }

</style>
